import React, { Component, Fragment } from 'react';

import { Card, List } from 'antd';
import { inject, observer } from 'mobx-react';
import ChangePwd from '../../components/ChangePwd';

@inject('store')
@observer
class SecurityView extends Component {
  state = {
    visible: false,
  }

  okHandler = () => {
    this.setState({visible: false})
    this.props.store.getSecurityCfg();
  }

  getData = () => {
    const { store } = this.props;
    let strength = '';
    if (store.securityCfg.pwdStrength == 0) {
      strength = '弱';
    } else if (store.securityCfg.pwdStrength >= 1 && store.securityCfg.pwdStrength <= 4) {
      strength = '中';
    } else {
      strength = '强';
    }
    return [
      {
        title: '账户密码',
        description: (<Fragment>当前密码强度：{strength}</Fragment>),
        actions: [<a onClick={()=>this.setState({visible: true})}>修改</a>],
      },
      {
        title: '备用邮箱',
        description: (<Fragment>已绑定邮箱：{store.securityCfg.email == null ? '未绑定' : store.securityCfg.email}</Fragment>),
        actions: [<a>修改</a>],
      },

    ];
  };

  render() {
    return (
      <Card title='安全设置' bordered={false}>
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description}/>
            </List.Item>
          )}
        />
        <ChangePwd visible={this.state.visible} okHandler={this.okHandler}/>
      </Card>);
  }
}

export default SecurityView;
